<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle boxBorder">
        <i
          class="icon iconfont iconfanhui1"
          style="vertical-align: top"
          v-if="historyRecords"
          @click="goBack"
        ></i>
        <div class="topBox">
          <el-select v-model="projectId" filterable placeholder="暂无关联项目">
            <el-option
              v-for="(item, index) of projects"
              :key="index"
              :label="item.name"
              :value="item.code"
              @click.native="
                changeProject(item.code, item.name, item.projectStatus)
              "
            ></el-option>
          </el-select>
        </div>
        <!-- <span class="status" v-if="!disabled">已开工</span> -->
        <span class="startStatus noStart" v-show="projectStatus == '未开工'"
          >未开工</span
        >
        <span class="startStatus" v-show="projectStatus == '已开工'"
          >已开工</span
        >
        <span class="startStatus startStop" v-show="projectStatus == '已停工'"
          >已停工</span
        >
        <span class="startStatus StartOver" v-show="projectStatus == '已竣工'"
          >已竣工</span
        >
        <el-link
          style="float: right; margin-top: 23px"
          type="primary"
          v-if="isSamllProject && !historyRecords"
          @click="goHistory"
          v-sdc
          class="fontBtn"
          >历史记录</el-link
        >

        <!-- 没有工伤保险，不需审核，需审核但是审核已通过的情况下可添加 -->
        <el-button
          class="commonBut funComBut saveBtn fr"
          icon="icon iconfont icontianjia"
          style="margin-top: 14px; margin-right: 0"
          :disabled="disabled"
          v-show="
            ((projects.length > 0 && infos.length == 0) ||
              !needCheck ||
              (infos.length > 0 &&
                infos[0].status == 'APPROVED' &&
                needCheck)) &&
            !isSamllProject
          "
          @click="addInsurance()"
        >
          <span class="opetareText">添加</span>
        </el-button>
        <el-button
          class="commonBut funComBut saveBtn fr"
          :disabled="disabled"
          v-show="needCheck && !isSamllProject"
          @click="checkRecord"
        >
          <span class="opetareText">审核记录</span>
        </el-button>
      </el-col>
    </el-row>
    <div class="mainCon">
      <!-- <div v-if="!noRecord">
        <addInsurance :needCheck="needCheck"/>
      </div> -->
      <div v-if="!isSamllProject || historyRecords">
        <template v-for="(info, index) in infos">
          <el-row class="insuranceBox clearfix" :key="index">
            <!-- <el-row :style="{marginTop:'40px'}"> -->
            <div
              class="clearfix"
              style="padding: 24px"
              v-show="index == '0' && info.statusDesc && needCheck"
            >
              <el-col
                :span="24"
                v-show="
                  (index == '0' && needCheck) ||
                  (index == '0' &&
                    (info.status === 'REJECT' || info.status === 'AUDIT'))
                "
                :class="[
                  'checkStatus',
                  {
                    audit: info.status === 'AUDIT',
                    reject: info.status === 'REJECT',
                    approved: info.status === 'APPROVED',
                  },
                ]"
              >
                <div class="fl">
                  <span
                    :class="[
                      'icon',
                      'iconfont',
                      {
                        icondengdai: info.status === 'AUDIT',
                        iconshibai1: info.status === 'REJECT',
                        iconyiqueren: info.status === 'APPROVED',
                      },
                    ]"
                  ></span>
                  <!-- <span class="icon iconfont icondengdai"></span> -->
                </div>

                <!-- <span class="icon iconfont iconshibai1"></span>  -->
                <div class="statusBox">
                  {{ info.statusDesc }}
                  <span class="remark" v-show="info.status == 'REJECT'"
                    >原因：{{ info.reason || '--' }}</span
                  >
                </div>
              </el-col>
            </div>
            <div
              class="spacing"
              v-show="index == '0' && info.statusDesc && needCheck"
            ></div>
            <div class="clearfix" style="padding: 24px">
              <el-col :span="24" class="titleBoxs">
                <div class="secondaryTitle secondaryTitleTheme">
                  <span v-if="index === 0">首次参保</span>
                  <span v-if="index > 0"
                    >{{ (index + 1) | numFormat }}次参保</span
                  >
                  <el-link
                    class="modify"
                    @click="modifyInsurance(info.id)"
                    v-show="
                      !needCheck ||
                      info.status == 'AUDIT' ||
                      info.status == 'REJECT'
                    "
                    >去修改 &gt;&gt;</el-link
                  >
                </div>
              </el-col>
              <!-- </el-row> -->
              <el-col :span="24" style="padding-left: 40px">
                <el-row class="insuranceDetail">
                  <!-- <el-col :span="24">
                      <span class="labelWidth">状态：</span>
                      <span class="information">{{"待审核"}}</span>
                  </el-col> -->
                  <el-col :span="8" class="detailInfoItemSty">
                    <span class="gridContent color333 fontSizeF fontWeight"
                      >受理机构：</span
                    >
                    <span
                      class="gridContent empContentSty color666 fontSizeF"
                      >{{ info.bureau || '--' }}</span
                    >
                  </el-col>
                  <el-col :span="8" class="detailInfoItemSty">
                    <span class="gridContent color333 fontSizeF fontWeight"
                      >单位编号：</span
                    >
                    <span
                      class="gridContent empContentSty color666 fontSizeF"
                      >{{ info.insNo || '--' }}</span
                    >
                  </el-col>
                  <el-col :span="8" class="detailInfoItemSty">
                    <span class="gridContent color333 fontSizeF fontWeight"
                      >参保时间：</span
                    >
                    <span
                      class="gridContent empContentSty color666 fontSizeF"
                      >{{ info.insDate || '--' }}</span
                    >
                  </el-col>
                  <el-col :span="8" class="detailInfoItemSty">
                    <span class="gridContent color333 fontSizeF fontWeight"
                      >参保人数：</span
                    >
                    <el-link
                      class="gridContent"
                      v-if="info.total > 0"
                      type="primary"
                      @click="showEmployeeList(info.id)"
                      >{{ info.total || '0' }}人</el-link
                    >
                    <span
                      v-else
                      class="gridContent empContentSty color666 fontSizeF"
                      >{{ info.total || '0' }}人</span
                    >
                  </el-col>
                  <el-col :span="8" class="detailInfoItemSty">
                    <span class="gridContent color333 fontSizeF fontWeight"
                      >参保单位：</span
                    >
                    <span
                      class="gridContent empContentSty color666 fontSizeF"
                      >{{ info.companyName || '--' }}</span
                    >
                  </el-col>
                </el-row>
              </el-col>
              <el-col
                :span="24"
                style="padding-left: 40px"
                class="detailInfoItemSty"
              >
                <el-row>
                  <div class="el-col-9">
                    <span class="gridContent color333 fontSizeF fontWeight">{{
                      isCzUser() ? '完税证明：' : '保单回执：'
                    }}</span>
                    <span
                      class="gridContent"
                      v-if="info.fileList && info.fileList.length > 0"
                    >
                      <span class="gridContent">已上传</span>
                      <el-link
                        @click="toUploadFile(info.fileList)"
                        style="vertical-align: initial"
                        >查看</el-link
                      >
                      <!-- <span class="gridContent seeFile" @click="toUploadFile(info.fileList)">查看</span> -->
                      <contractEnclosureDialog
                        v-if="uploadContract"
                        :dialogTitle="isCzUser() ? '完税证明' : '保单回执'"
                        :tableData="tableData"
                        @closeDialog="hiddenDialog"
                      ></contractEnclosureDialog>
                    </span>
                    <span v-else>未上传</span>
                  </div>
                </el-row>
              </el-col>
            </div>
            <el-divider v-if="infos.length - 1"></el-divider>
          </el-row>
        </template>
        <div slot="empty" v-show="projects.length == 0" class="emptyBox">
          <emptyTable emptyText="暂无关联项目"></emptyTable>
        </div>
        <div
          slot="empty"
          v-show="projects.length > 0 && infos.length == 0"
          class="emptyBox"
        >
          <emptyTable
            emptyText="您还未添加工伤保险购买信息，请前去添加"
          ></emptyTable>
        </div>
      </div>
      <div v-else class="smallPro">
        <div class="smallProBox">
          <img
            :src="require('@/assets/smallProject.png')"
            alt=""
            width="65px"
            height="73px"
          />
          <div style="margin-left: 28px">
            <p>无需缴纳工伤保险</p>
            <p>根据小项目管理规则，无需缴纳工伤保险</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="参保人员明细"
      :visible.sync="dialogFormVisible"
      width="900px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <!-- <div> -->
      <el-row class="toolbar" style="padding-bottom: 0; margin-top: 8px">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="姓名" class="row-padding-bottom">
            <el-input
              type="text"
              v-model="filterField.searchText"
              placeholder="请输入姓名或身份证号"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec; margin-bottom: 16px"
        ref="multipleTable"
      >
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证号码"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column prop="address" label="户口所在地" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.address"
              :columnName="'address'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="电话号码" align="center" width="180">
          <template slot-scope="scope">
            <p>{{ scope.row.tel || '--' }}</p>
          </template>
        </el-table-column>
      </el-table>

      <!-- getTableList为获取子组件的数据 -->
      <el-col :span="24" class="toolbar" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentTotal"
        >
        </el-pagination>
      </el-col>
      <!-- </div> -->
    </el-dialog>
    <!-- 审核记录弹窗 -->
    <el-dialog
      title="审核记录"
      :visible.sync="formVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width"
      width="80%"
      :modal-append-to-body="false"
    >
      <el-table
        :data="drawerTableList"
        v-loading="drawerLoading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="operationDate"
          label="最后提交审核时间"
          align="center"
          width="180"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="companyName"
          label="参保单位"
          align="center"
          width="150"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.companyName"
              :columnName="'companyName'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="insNo"
          label="单位编号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="bureau"
          label="参保受理机构"
          align="center"
          width="150"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.bureau"
              :columnName="'bureau'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="insDate"
          label="参保时间"
          align="center"
          width="120"
          :formatter="formatTd"
        >
        </el-table-column>
        <el-table-column
          prop="statusDesc"
          label="状态"
          align="center"
          width="100"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="reason"
          label="驳回原因"
          :formatter="formatTd"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.reason"
              :columnName="'reason'"
            ></copyText>
          </template>
        </el-table-column>
        <div slot="empty" v-show="drawerIsShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import addInsurance from './addInsurance.vue'
export default {
  name: 'insurance',
  // components: {
  //   addInsurance
  // },
  data() {
    return {
      dialogFormVisible: false,
      srcList: [],
      //表格数据
      tableList: [],
      projects: [],
      projectId: '',
      projectName: '',
      disabled: true,
      currentPage: 1,
      pageSize: 5,
      currentTotal: 0,
      isShow: false, //列表加载
      canLogin: false, //保存loading
      infos: [],
      insId: '',
      filterField: {
        searchText: '', //搜索身份证号
      },
      projectStatus: '', //开工状态
      isShowAdd: '',
      isShowUpdate: '',
      uploadContract: false,
      tableData: [],
      // 审核记录弹窗
      formVisible: false,
      drawerTableList: [],
      insId: '',
      drawerLoading: false,
      drawerIsShow: false,
      needCheck: '', //是否需要审核
      isSamllProject: false,
      historyRecords: false, //历史记录
      userType: '', //判断用户类型
    }
  },
  created() {
    this.$store.state.activeMenu = '/home/insurance/insurance'
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.userType = this.$store.state.userType
    if (typeof this.projectId === 'undefined') {
      this.getProjects()
    } else {
      this.getProjects2()
    }
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('insurance:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('insurance:update') > -1
    this.getinsuranceDetail()
  },
  methods: {
    getinsuranceDetail() {
      this.axios({
        method: 'post',
        url: 'api-m/paramconfig/findbyname',
        data: {
          name: 'empInsAuditConfig',
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.value == '1') {
              this.needCheck = true
            } else {
              this.needCheck = false
            }
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '数据请求失败，请重试',
            type: 'error',
          })
        })
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/inslist',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          this.infos = response.data.result
          if (this.infos.fileList.length > 0) {
            this.disabled = false
            for (var i = 0; i < this.infos.fileList.length; i++) {
              this.srcList.push(this.infos.fileList[i].url)
            }
          }
        })
        .catch((error) => {})
    },
    changeProject(id, projectName, projectStatus) {
      this.infos = {}
      this.projectId = id
      this.projectName = projectName
      this.projectStatus = projectStatus
      this.getDetail(id)
    },
    getProjects() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {},
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projects = resp.data.result
            if (this.projects.length > 0) {
              this.disabled = false
              this.projectStatus = this.projects[0].projectStatus
              this.projectId = this.projects[0].code
              this.projectName = this.projects[0].name
              // 小项目规则  项目端调用
              if (
                this.userType == 'PROJECT_ADMINISTRATOR' ||
                this.userType == 'LABOR_ADMINISTRATOR'
              ) {
                this.getSamllProject(this.projectId)
              }
            } else {
              this.$alert('您还未加入项目请前往项目申请页面申报项目', '', {
                confirmButtonText: '确定',
                confirmButtonClass: 'messageButColor',
                showClose: false,
              })
                .then(() => {
                  this.$router.push({
                    path: '/home/project/projectDeclareList',
                    name: 'projectDeclareList',
                    query: {
                      type: 'projectDeclareList',
                    },
                  })
                  this.$store.commit('CHANGE_SLIDER_NAME', {
                    oldUrl: '/home/project/projectDeclareList',
                    newUrl: this.$router.currentRoute.fullPath,
                  })
                })
                .catch(() => {})
            }
            this.getDetail(this.projectId)
            //console.log(this.projects);
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },

    getProjects2() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {},
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projects = resp.data.result
            if (this.projects.length > 0) {
              this.disabled = false
              this.projectStatus = this.projects[0].projectStatus
              //项目详情-工伤保险跳转进入工伤保险列表
              this.projectId = this.$route.query.projectId
                ? this.$route.query.projectId
                : this.projects[0].code
              this.projectName = this.$route.query.projectName
              // 小项目规则  项目端调用
              if (
                this.userType == 'PROJECT_ADMINISTRATOR' ||
                this.userType == 'LABOR_ADMINISTRATOR'
              ) {
                this.getSamllProject(this.projectId)
              }
            }
            this.getDetail(this.projectId)
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    async addInsurance() {
      await this.getMiniRule()
      if (this.isIns === 0) {
        this.$message.error(
          '根据小项目配置规则，该项目无需添加工伤保险，如有问题请联系当地监察'
        )
        return
      }
      debugger
      var insId = ''
      if (this.infos.length > 0) {
        insId = this.infos[0].id
      }
      this.$router.push({
        path: '/home/insurance/addInsurance',
        name: 'addInsurance',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
          needCheck: this.needCheck,
          insId: insId,
          // companyName:companyName
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/insurance/insurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取小项目规则
    getMiniRule() {
      return this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isIns = res.data.result.isIns
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    showEmployeeList(id) {
      this.insId = id
      this.searchList()
      this.dialogFormVisible = true
    },
    searchList() {
      this.tableList = []
      this.axios({
        method: 'POST',
        url: 'api-e/cs/insdetail/expand/insemployeepage',
        data: {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          searchText: this.filterField.searchText,
          insId: this.insId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            // this.tableList = response.data.result.results;
            if (response.data.result.results) {
              this.tableList = response.data.result.results
              this.currentTotal = response.data.result.total
            } else {
              this.tableList = []
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    modifyInsurance(id) {
      this.$router.push({
        path: '/home/insurance/editInsurance',
        name: 'editInsurance',
        query: {
          insId: id,
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/insurance/insurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchList()
    },
    goBack() {
      this.$router.push({ name: 'insuranceList' })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/insurance/insurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUploadFile(tableData) {
      this.tableData = tableData
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    // 审核记录
    checkRecord() {
      if (this.infos.length < 1) {
        this.$message({
          type: 'warning',
          message: '暂无审核记录',
        })
        return
      } else {
        this.insId = this.infos[0].id
      }
      this.formVisible = true
      this.drawerLoading = true

      this.axios({
        method: 'post',
        url: 'api-e/cs/inslog/expand/listbyinsid',
        data: {
          insId: this.insId,
        },
      })
        .then((response) => {
          this.drawerTableList = response.data.result
          this.drawerLoading = false
          if (!this.drawerTableList.lenght || this.drawerTableList.lenght < 1) {
            this.drawerIsShow = true
          }
        })
        .catch((error) => {
          this.drawerLoading = false
        })
    },
    // 历史记录
    goHistory() {
      this.historyRecords = true
    },
    // 返回小项目提示
    goBack() {
      this.historyRecords = false
    },
    // 判断是否是小项目
    getSamllProject(projectId) {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProInsConfig',
        data: {
          projectId: projectId,
        },
      })
        .then((response) => {
          if (response.data.result == 'false') {
            this.isSamllProject = false
          } else {
            this.isSamllProject = true
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style lang="less" scoped>
.topBox {
  display: inline-block;
  vertical-align: top;
  /deep/.el-input__inner {
    font-size: 22px;
    font-weight: bold;
    color: #333333;
    border: none;
    height: 30px;
    line-height: 30px;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // margin-top: 18px;
  }
  /deep/.el-select__caret {
    color: #333;
    font-size: 20px;
    // line-height: 30px;
  }
}

.topTitle {
  border-radius: 4px 4px 0 0;
  padding: 0 24px;
  height: 64px;
  line-height: 64px;
  .titleStyle {
    color: #333;
    font-size: 18px;
    .el-icon-caret-bottom {
      color: #71818e;
    }
  }
  /* 开工状态 */
  .startStatus {
    display: inline-block;
    width: 48px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    background: #009588;
    color: #fff;
    text-align: center;
    font-size: 12px;
    margin-top: 22px;
    // border-radius: 4px;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .saveBtn {
    margin-right: 24px;
    margin-top: 14px;
  }
}
.mainCon {
  padding: 0;
  min-height: calc(100% - 67px);
  .title {
    position: relative;
    padding-left: 20px;
    height: 37px;
    font-size: 16px;
    border-bottom: 2px solid #f5f7fa;
    margin-bottom: 24px;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 16px;
      left: 0;
      top: 3px;
      background: #265faa;
    }
  }
  .insuranceBox {
    font-size: 14px;
    .insuranceDetail {
      .el-row {
        margin-bottom: 16px;
      }
      .content {
        color: #2a2a2a;
      }
    }
    .picBox {
      margin-right: 12px;
      .picStyle {
        width: 80px;
        height: 80px;
        .imgStyle {
          width: 100%;
          height: 100%;
        }
      }
      .picTipStyle {
        text-align: center;
      }
    }
  }
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
.goBack {
  display: block;
  width: 136px;
  margin: 60px auto 0 auto;
}
.emptyBox {
  margin-top: 80px;
  color: #909399;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  img {
    margin-top: 20px;
  }
}
.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
}
.information {
  font-size: 14px;
  color: #151515;
  // display: block;
  width: 98%;
}
.opetareText {
  cursor: pointer;
}

// 审核状态
.checkStatus {
  padding: 16px 24px;
  background: #f8f9fb;
  // border: 1px solid #DBDBDB;
  position: relative;
  .icon {
    font-size: 36px;
    // color: #67ACE4;
    display: block;
  }
  .statusBox {
    display: inline-block;
    margin-left: 12px;
    font-size: 18px;
    // color: #67ACE4;
    font-weight: 500;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    .remark {
      display: block;
      font-size: 14px;
      color: #333;
    }
  }
}
// 待审核
.checkStatus.audit {
  .icon {
    color: #ffc200;
  }
  .statusBox {
    color: #ffc200;
  }
}
// 驳回
.checkStatus.reject {
  .icon {
    color: #e02020;
  }
  .statusBox {
    color: #e02020;
  }
}
// 通过
.checkStatus.approved {
  .icon {
    color: #009588;
  }
  .statusBox {
    color: #009588;
  }
}
.titleBoxs {
  position: relative;
  padding: 0;
  .modify {
    position: absolute;
    right: 14px;
    top: 0;
  }
}
.smallPro {
  width: 470px;
  height: 136px;
  background: rgba(151, 182, 217, 0.1);
  border: 1px solid rgba(164, 186, 215, 1);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  .smallProBox {
    display: flex;
    align-items: center;
    justify-content: fLex-start;
    height: 136px;
    padding-left: 44px;
    div {
      p {
        &:nth-of-type(1) {
          font-size: 20px;
          color: #0f90f9;
          font-weight: 700;
        }
        &:nth-of-type(2) {
          font-size: 16px;
          color: rgba(15, 144, 249, 0.8);
          font-weight: 500;
          margin-top: 4px;
        }
      }
    }
  }
}
.el-divider--horizontal {
  margin-bottom: 0 !important;
}
</style>
